import React from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd'
import MyCard from '../../components/MyCard'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { Card } from 'antd'
const App = () => {
  const navigator = useNavigate()
  const [myForm] = Form.useForm()
  const onClick = () => {
    myForm
      .validateFields()
      .then(res => {
        localStorage.setItem('info', JSON.stringify(res))
        message.success({
          content: '登录成功，正在跳转...',
          duration: 2,
          onClose: () => {
            navigator('/center/info')
          }
        })
      })
      .catch(err => {
        message.error({ content: '邮箱或密码错误', duration: 1 })
      })
  }
  return (
    <MyCard className="Login">
      <Card title="登录界面">
        <Form
          form={myForm}
          name="basic"
          labelCol={{
            span: 8
          }}
          wrapperCol={{
            span: 16
          }}
          initialValues={{
            remember: true
          }}
          autoComplete="off"
        >
          <Form.Item
            name="email"
            label="E-mail"
            rules={[
              {
                type: 'email',
                message: 'The input is not valid E-mail!'
              },
              {
                required: true,
                message: 'Please input your E-mail!'
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!'
              }
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button type="primary" onClick={onClick}>
                登录
              </Button>
              <Button
                onClick={() => {
                  navigator('/center/register')
                }}
              >
                注册
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </MyCard>
  )
}
export default App
